<template>
  <div class="main pb20 pt116">
    <div class="padding-tb-15">
      <Breadcrumb separator="">
        <BreadcrumbItem>当前位置</BreadcrumbItem>
        <BreadSeparator>:</BreadSeparator>
        <BreadcrumbItem><a href="/service">数据服务</a></BreadcrumbItem>
        <BreadSeparator>></BreadSeparator>
        <BreadcrumbItem>企业数据</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <Collapse v-model:activeKey="activeKey" expandIconPosition="right">
      <CollapsePanel key="1" header="筛选条件">
        <div class="comp-query">
          <div class="comp-query-form">
            <Form :wrapper-col="{ span: 18 }">

              <Row :gutter="[24, 24]">
                <Col :span="8">
                  <FormItem label="地域属性">
                    <RadioGroup v-model:value="queryParam.areaType">
                      <Radio value="">全部</Radio>
                      <Radio value="lh">本地企业</Radio>
                      <Radio value="et">进疆企业</Radio>
                    </RadioGroup>
                  </FormItem>
                </Col>
                <Col :span="16">
                </Col>
              </Row>
              <Row :gutter="[24,  12]">
                <Col :span="24">
                  <FormItem label="资质类别" :wrapper-col="{ span: 22 }">
                    <RadioGroup class="w" v-model:value="queryParam.qualType">
                      <RadioButton value="" >全部</RadioButton>
                      <RadioButton :value="item.id" v-for="item in qualType">{{ item.dataValue }}</RadioButton>
                    </RadioGroup>
                  </FormItem>
                </Col>

              </Row>
              <Row :gutter="[24, 24]">
                <Col :span="8">
                  <FormItem label="企业名称">
                    <Input v-model:value="queryParam.corpName" placeholder="请输入企业名称" />
                  </FormItem>
                </Col>
                <Col :span="8">
                  <FormItem label="统一社会信用代码" class="my">
                    <Input v-model:value="queryParam.corpCode" placeholder="请输入统一社会信用代码" />
                  </FormItem>
                </Col>
                <Col :span="8">
                  <FormItem label="企业注册地">
                    <Cascader  v-model:value="value" change-on-select expandTrigger="hover"
                               :field-names="{ label: 'regionName', value: 'regionCode', children: 'children' }"
                               :options="options" @change="regionChange"
                               placeholder="请选择企业注册地">
                    </Cascader>
                  </FormItem>
                </Col>
              </Row>


              <Row :gutter="[24, 12]">
                <Col :span="8">
                  <FormItem label="行为限制">

                    <Select v-model:value="queryParam.behaviour">
                      <Option value="">不限</Option>
                      <Option value="0">无行为限制</Option>
                      <Option value="1">有行为限制</Option>
                    </Select>
                  </FormItem>
                </Col>
                <Col :span="8">
                  <FormItem label="资质项查询" :wrapper-col="{ span: 17 }">
                    <Input v-model:value="queryParam.certName" placeholder="关键字搜索，例“施工总承包一级”" />
                  </FormItem>
                </Col>
                <Col :span="8" class="text-right">
                  <Button type="primary" ghost @click="handleReset">重置</Button>
                  <Button type="primary" @click="handleSearch">立即查询</Button>
                </Col>
              </Row>


              <Row :gutter="[24, 24]">
                <Col :span="24">
                  查询结果：共<span class="red">{{pagination.total}}</span>条数据
                </Col>

              </Row>
            </Form>
          </div>
        </div>
      </CollapsePanel>
    </Collapse>
    <div class="comp-table">
      <List
          item-layout="horizontal"
          :data-source="dataSource"
          :pagination="pagination"
          :loading="loading"

      >
        <template #renderItem="{ item , index}">
          <ListItem>
            <div class="initWrap flex-s">
              <div class="init-sx" :style="`background: ${colorArr[index%5]}`">{{ str4(item.corpName) }}</div>
              <div class="init-sr">
                <h4 class="flex-s">
                  <a target="_blank" :href="`/company/${item.corpId}`">{{ item.corpName }}   </a>
                  <span class="address"><i></i> {{ item.regionName }}</span>
                </h4>
                <p class="init-des">
                  <span class="mr20"> 统一社会信用代码：{{ item.corpCode }}</span>
                  <span>企业法定代表人：{{ item.legalPerson }}</span>
                </p>
                <div class="init-data">
                  <span class="com">
                    <i></i> 数据
                  </span>
                  <span>资质资格<b class="blue">{{ item.aptCertCount }}</b>项</span>
                  <span>企业人员<b class="blue">{{ item.staffCount }}</b>名</span>
<!--                  <span>在建业绩<b class="blue">{{ item.safetyCount }}</b>个</span>-->
                </div>
              </div>
            </div>

          </ListItem>
        </template>
      </List>
    </div>
  </div>
</template>

<script lang="ts" >
import {defineComponent, ref, unref, toRefs, onMounted, reactive, watch} from "vue";
import {Row, Col, Form, Input, Button, Cascader, Collapse, Breadcrumb, List , Radio ,Select} from "ant-design-vue";
import { useRouter, useRoute } from "vue-router";
import { getCompListApi , colorArr , getIndexCodeApi} from '/@/api/company';
import { getRegion  } from '/@/api/pro';
import { str4 } from "/@/utils";

// type
interface queryConfig {
  area: string;
  areaType: string;
  complex:string;
  corpName: string;
  corpCode:string,
  qualType:string,
  behaviour:string,
  certName:string,
  current: number;
  size: number;
}

interface qualTypeConfig {
  dataValue: string;
  id:string;
}

interface Option {
  regionCode: string;
  regionName: string;
  disabled?: boolean;
  children?: Option[];
  [key: string]: any;
}

export default defineComponent({
  name: "ModuleComp",
  components: {
    Row,Col, Form, FormItem: Form.Item, Input, Button, Cascader, Select , Option: Select.Option,
    Collapse, CollapsePanel:Collapse.Panel, Breadcrumb, BreadcrumbItem:Breadcrumb.Item,
    BreadSeparator:Breadcrumb.Separator, List, ListItem: List.Item,
    Radio , RadioButton:Radio.Button,RadioGroup:Radio.Group
  },
  setup() {
    const activeKey = ref(['1']);
    const search = ref<string>('')
    const loading = ref<boolean>(true);
    const value = ref<string[]>([]);
    const options=ref<Option[]>([]);
    const qualType=ref<qualTypeConfig[]>([]);
    const { query } = toRefs(useRoute());
    const router = useRouter();
    search.value = unref(query).search as string || '';
    const dataSource = ref<unknown[]>([])
    const pagination = ref({
      current: 1,
      total: 0,
      onChange: (page: number) => {
        pagination.value.current = page;
        queryParam.current = page;
        getTableList();
      },
      pageSize: 10
    })


    let queryParam = reactive<queryConfig>({
      area: "",
      areaType: "",
      qualType: "",
      complex: unref(query).search as string || "",
      corpName: '',
      behaviour: '',
      corpCode:'',
      certName: "",
      current: 1,
      size: 10
    })

    const getTableList = async () => {
      loading.value = true;
      let data = await getCompListApi(queryParam);
      pagination.value.total = data.total;
      dataSource.value = data.records;
      loading.value = false;
    }

    const handleSearch = () => {
      queryParam.current = 1;
      pagination.value.current = 1;
      getTableList();
    }

    const handleReset = () => {
      router.push({
          query: { search: '' }
      });
      value.value = [];
      pagination.value.current = 1;
      Object.assign(queryParam,{
        area: "",
        complex: "",
        corpName: "",
        corpCode: "",
        areaType: "",
        qualType: "",
        behaviour: '',
        certName: "",
        current: 1
      })
      getTableList();
    }

    const regionChange = (value)=>{
      if(value){
        queryParam.area = value[value.length-1]
      }
    }

    const methodRegion = async () => {
      options.value = await getRegion();
    }

    onMounted(() => {
      methodRegion()
      getTableList();

      getIndexCodeApi('QY_TYPE').then(res=>{
        qualType.value = res
      })

    });

    watch(query, (cur)=> {
      if(cur.search){
        queryParam.complex = cur.search.toString();
        getTableList();
      }
    })

    return {
      activeKey,queryParam, dataSource, options ,loading,
      pagination , getTableList, handleSearch, colorArr,
      handleReset , value , regionChange , str4 , qualType
    };
  },
});
</script>

<style lang="less" scoped>

::v-deep(.ant-col) {
  .ant-form-item.my {
    .ant-form-item-control-wrapper {
      flex: 0 0 60%;
    }
  }
}

.comp-query {
  padding: 2px 5px;
  background: @white;

  ::v-deep(.ant-form-item-label) {
    > label {
      color: @grey;
    }
  }

  ::v-deep(.ant-form-item) {
    margin-bottom: 0;
  }

  ::v-deep(.ant-btn) {
    margin-right: 16px;

    &:last-child {
      margin-right: 10px;
    }
  }
}

::v-deep(.ant-list-item){
  padding: 25px 0;
  margin-bottom: 0;
}

.comp-table {
  padding: 0 30px;
  margin-top: 15px;
  background: @white;
}

.com{
  padding-right: 20px;
  margin-right: 20px !important;
  color: @blue;
  border-right: 1px solid #E8EAEE;

  i{
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    vertical-align: text-bottom;
    background: url("/src/assets/img/qi.png") no-repeat;
  }
}

::v-deep(.ant-radio-group){
  &.w{
    label{
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
}

</style>
